<template>
	<view class="searchList">
		<view class="searchList-item" v-for="item in historyData" :key='item._id'>
			<navigator class="searchList-item" :url="'/pages/detail/detail?_id='+item._id">
				<image :src="item.coverpic"></image>
				<view class="box">
					<text>{{item.name}}</text>
					<view class="textbox">
						<text v-for="(item1,index) in item.ingredient" :key='index'>{{item1.name}}、</text>
					</view>
					<view class="imgbigbox">
						<view class="imgbox">
							<text>{{item.pageview}}.0万</text>
							<image src="../../static/image/index/like/mengbanzu278.png"></image>
						</view>
						<view class="imgbox">
							<text>{{Math.abs(item.collections)}}</text>
							<image src="../../static/image/index/like/mengbanzu279(1).png"></image>
						</view>
					</view>

				</view>
			</navigator>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historyData: []
			};
		},
		onLoad(options) {
			// console.log(options);
			this.getRecord({_id:options.data})
		},
		methods:{
			getRecord(data){
				this.$api.my.getRecord(data).then(res=>{
					this.historyData=res.record
					// console.log(res.record);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchList {
		margin-top: 40rpx;

		.searchList-item {
			margin-bottom: 26rpx;
			display: flex;

			>image {
				width: 314rpx;
				height: 210rpx;
				border-radius: 16rpx;
				margin-right: 18rpx;
			}

			>.box {
				>text {
					font-size: 30rpx;
					font-weight: bold;
				}

				.textbox {
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #aaa;
					width: 340rpx;
					height: 30rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;

					text {}

				}

				.imgbigbox {
					display: flex;
					margin-top: 54rpx;
					align-items: center;

					.imgbox {
						margin-right: 42rpx;

						text {
							font-size: 18rpx;
							color: #aaa;

						}

						image {
							width: 28rpx;
							height: 22rpx;
						}
					}
				}

			}
		}
	}
</style>
